import React,{useState,useContext} from 'react'
import Header from '../../components/Header/Header'
import { Link } from 'react-router-dom'
import {Button,Form,Input,Toast} from "antd-mobile"
import { reqlogin } from '../../http/api'
import { MyContext } from '../../App'
import { actions } from '../../reducer/app'
export default function Login(props) {
  // 1.初始化表单数据
  const [user,setUser] = useState({
    phone:"",
    password:""
  })
  const {state,dispatch} = useContext(MyContext)
  //登陆逻辑
  const doLogin=()=>{
    reqlogin(user).then(res=>{
      if(res.data.code==200){
        //弹成功
        Toast.show({
          content:res.data.msg
        })
        //存数据
        dispatch(actions.changeUserInfo(res.data.list))
        //跳转页面
        props.history.push("/index/home")
      }
    })
  }
  return (
    <div>
      <Header register title="登陆"></Header>
      <div>user:{JSON.stringify(user)}</div>
      <Form layout='horizontal'>
        <Form.Item label='用户名' name='username'>
          <Input placeholder='请输入用户名' clearable onChange={v=>setUser({
            ...user,
            phone:v
          })} />
        </Form.Item>
        <Form.Item label='密码' name='password'>
          <Input placeholder='请输入密码' clearable type='password' onChange={v=>setUser({
            ...user,
            password:v
          })} />
        </Form.Item>
      </Form>
      <Button color='primary' size="mini" onClick={()=>doLogin()} >登陆</Button>
    </div>
  )
}
